---
id: 613e275749ebd008e74bb62e
title: Крок 8
challengeType: 0
dashedName: step-8
---

# --description--

Корисна властивість _SVG_ (масштабована векторна графіка): завдяки атрибуту `path` можна масштабувати зображення без впливу на роздільність вихідного зображення.

Наразі `img` припускає свій розмір за замовчуванням, що є занадто великим. CSS має функцію `max`, яка повертає найбільше з множини значень, розділених комами. Наприклад:

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

Масштабуйте зображення, використавши його `id` як селектор та встановивши `width` на максимум `100px` або `18vw`.

# --hints--

Ви повинні використати селектор `#logo`, щоб націлити елемент `img`.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

Ви повинні надати `img` властивість `width` зі значенням `max(100px, 18vw)`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
